<template>
    <div class="container" style="padding: 0;margin: 0;">
        <div class="flex-col full">
            <div class="w_full">
                <div class="w_full flex-row-center space-between">
                    <el-button link class="back_title" @click="click_back" :icon="Back">返回人员管理列表</el-button>
                </div>
            </div>
            <div class="w_full flex-row-center space-between" style="margin-top: 16px;">
                <div class="title">新增</div>
                <div>
                    <el-button class="search_btn_primary" size="large" type="primary" @click="btn_click_ok">确定</el-button>
                </div>
            </div>

            <div class="flex_1 flex-row comm_border" style="margin-top: 16px;">
                <div class="flex-col" style="margin: 24px;">
                    <div class="flex-row">
                        <div class="user_title_rec"></div>
                        <div class="user_title">基本信息</div>
                    </div>
                    <div class="user_content" style="margin-top: 24px; margin-left: 150px;">
                        <el-form label-position="left"
                                 :model="data" label-width="100px"
                                 ref="form"
                                 style="margin: 10px; width: auto">
                            <el-form-item class="form_item" prop="qtType" label="课程名称">
                                <el-input v-model="data.trainName"></el-input>
                            </el-form-item>
                            <el-form-item class="form_item" prop="qtType" label="培训日期">
                                <el-date-picker v-model="data.trainDate"
                                                type="date"
                                                placeholder="请输入日期"
                                                value-format="YYYY-MM-DD"
                                                format="YYYY-MM-DD HH:mm:00"
                                                size="default"></el-date-picker>
                            </el-form-item>
                            <el-form-item class="form_item" prop="qtType" label="课程时长">
                                <el-date-picker v-model="data.trainEndDate"
                                                type="date"
                                                placeholder="请输入日期"
                                                value-format="YYYY-MM-DD"
                                                format="YYYY-MM-DD HH:mm:00"
                                                size="default"></el-date-picker>
                            </el-form-item>
                            <el-form-item class="form_item" prop="qtType" label="授课人员姓名">
                                <el-input v-model="data.trainTeacher"></el-input>
                            </el-form-item>
                            <el-form-item class="form_item" prop="qtType" label="课程描述">
                                <el-input style="height: 150px" v-model="data.trainDesc"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="flex-row" style="margin-top: 64px">
                        <div class="user_title_rec"></div>
                        <div class="user_title">基本信息</div>
                    </div>
                    <div class="user_content" style="margin-top: 24px;margin-left: 50px;">

                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive } from "vue";
    import { Back } from "@element-plus/icons-vue";
    import { useRoute } from "vue-router";
    import router from "@/router";
    import { timeStrAsTick } from "@/utils/TimeUtil";
    import msg from "@/components/msg";
    import { api_addTrain } from "@/request/apis/trainApi";


    const route = useRoute();

    console.log('route', route);
    console.log('route.query', route.query);
    console.log('route.params', route.params);
    const userIdPara = route.query.userId as string;

    const data = reactive({
        trainName: '',
        trainDate: '',
        trainEndDate: '',
        trainTeacher: '',
        trainDesc: '',
    })

    const click_back = () => {
        router.back();
    }
    const btn_click_ok = async () => {
        let startDate = data.trainDate ? timeStrAsTick(data.trainDate) : null;
        let endDate = data.trainEndDate ? timeStrAsTick(data.trainEndDate) : null;
        let trainingName = data.trainName;
        let teacher = data.trainTeacher;
        let trainDesc = data.trainDesc;
        const r = await api_addTrain(trainingName, startDate, endDate, teacher, trainDesc, '');
        if (!r) {
            await msg.error("数据异常");
            return;
        }
        if (r.code != 0) {
            await msg.error(`数据异常!  ${r.code} msg：${r.msg}`);
            return;
        }
        //返回列表
        router.back();
    }

</script>

<style scoped>
    .user_image {
        width: 150px;
        height: 150px;
    }

    .user_userName {
        font-size: 24px;
        font-weight: 600;
        color: #0A1629;
        line-height: 28px;
        margin-top: 32px;
    }

    .user_userId {
        font-size: 16px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        line-height: 24px;
        margin-top: 16px;
    }

    .user_title_rec {
        width: 4px;
        height: 28px;
        background: #3F8CFF;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
    }

    .user_title {
        font-size: 20px;
        font-weight: 400;
        color: #0A1629;
        line-height: 23px;
        margin-left: 8px;
    }

    .form_item {
        margin-top: 16px;
    }


    .grid-container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100%;
    }

    .row {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .row-1,
    .row-3 {
    }

    .row-2 {
        overflow: auto;
    }

    .scrollable-content {
        line-height: 1.5em;
    }


    .title {
        font-size: 24px;
        font-weight: 600;
        color: #0A1629;
        line-height: 28px;
    }

    .back_title {
        font-size: 16px;
        font-weight: 600;
        color: #3F8CFF;
        line-height: 19px;
    }

    .user_data {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        margin-left: 16px;
    }

    .date-picker {
        height: 48px;
        color: black;
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid #DCDCDC;
    }

    .el-scrollbar__view {
        height: calc(100% - 100px); /* 根据实际情况调整高度 */
    }

    .infinite-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .infinite-list .infinite-list-item {
            display: flex;
            align-items: center;
            justify-content: center;
            background: black;
            margin: 10px;
            color: var(--el-color-primary);
            overflow: hidden;
        }

            .infinite-list .infinite-list-item + .list-item {
                margin-top: 10px;
            }

    .naireName {
        font-size: 20px;
        font-weight: 400;
        color: #0A1629;
        line-height: 24px;
    }
</style>

